<template>
  <base-container>
    <base-card>
      <template #header>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <h3>资金账户概览</h3>
            <p class="text-ct3 text-14px pl-20px pt-8px">
              说明: 资金账户的钱用于调用平台型应用时扣款。（如征信查询、短信包购买、风控查询等）
            </p>
            <div class="pt-8px">
              <el-link type="primary">查看平台型应用</el-link>
            </div>
          </div>
          <div>
            <el-button type="primary" @click="handleRecharge">在线充值</el-button>
          </div>
        </div>
      </template>
      <div class="py-10px w-full">
        <div class="flex items-center justify-between w-full">
          <div
            v-for="item in cardList"
            :key="item.id"
            :class="item.class"
            class="w-210px h-80px bg-gradient-to-b text-center rounded-lg py-20px border-1px border-solid"
          >
            <div class="text-24px">{{ item.value }}</div>
            <div class="text-ct3 text-12px">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </base-card>

    <!-- 卡片容器 -->
    <base-table-card class="mt-20px">
      <template #header-left>
        <el-tabs v-model="searchParams.status" @tab-change="handleTabChange">
          <el-tab-pane v-for="item in tabPaneOptions" :key="item.name" v-bind="item" />
        </el-tabs>
      </template>
      <div
        v-if="searchParams.status === '02'"
        class="h-45px px-20px bg-gradient-to-r from-[#E6F4FF] to-[#fff] leading-[45px] text-[#333] text-[14px] rounded-10px"
      >
        <i class="px-5px text-[#1777ff] iconfont ic-guanyushuoming" />
        <span class="text-[#170304]">
          消费记录中统计A类应用平台及商家的使用数据，B类应用因划扣平台在第三方的资金账户所以不在此统计。
        </span>
      </div>
      <!-- 搜索栏 -->
      <avue-table-search
        v-model="searchParams"
        :option="searchOption"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      />
      <avue-crud
        v-model="formData"
        :data="tableData"
        :option="searchParams.status === '01' ? rechargeRecordTableOption : consumeRecordTableOption"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
        @row-save="loadAdd"
        @row-update="loadEdit"
      >
      </avue-crud>
    </base-table-card>
    <base-dialog v-model="isShowRecharge" :show-footer="false" title="资金账户充值" width="20%">
      <div class="px-20px">
        <div v-if="!isShowRechargePaymentCode">
          <el-form ref="rechargeFormRef" :model="rechargeForm" label-width="auto">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '请输入充值金额' }]" label="充值金额" prop="amount">
                  <el-input v-model="rechargeForm.amount" placeholder="请输入充值金额">
                    <template #append>
                      <span>元</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="text-center">
            <el-button @click="handleRechargeCancel">取消</el-button>
            <el-button type="primary" @click="handleRechargeSubmit">去支付</el-button>
          </div>
        </div>
        <div v-if="isShowRechargePaymentCode" class="text-center">
          <el-form ref="paymentCodeForm" :model="paymentCode" label-width="auto">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="客户名称" prop="customerName">
                  <span>{{ paymentCode.customerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="账户余额" prop="balance">
                  <span>{{ paymentCode.balance }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="bg-gradient-to-t from-[#F4F0FF] to-white rounded-md py-20px relative">
            <div
              :class="isShowMaskingLayer ? 'opacity-100' : 'opacity-0'"
              class="w-165px h-165px absolute bg-translucent z-100 rounded-lg left-31% transition-all"
            >
              <div class="py-60px">
                <p class="text-[#fff]" text>二维码已过期</p>
                <div class="pt-5px">
                  <el-button type="default" @click="handleRefreshClick">刷新</el-button>
                </div>
              </div>
            </div>
            <el-image :src="codePng" class="w-164px h-165px border-1px border-solid border-bd7 rounded-lg"></el-image>
            <p class="text-12px text-ct4 py-5px">用微信/支付宝扫一扫即可支付</p>
            <div class="py-10px">
              <span class="text-ct2 text-14px leading-22px">
                <el-text type="danger">*</el-text>
                <el-text> 支付金额：</el-text>
              </span>
              <el-text type="danger">
                <b class="text-14px font-400">￥</b>
                <strong class="text-24px font-500">{{ rechargeForm.amount }}</strong>
              </el-text>
            </div>
          </div>
          <div class="pt-20px">
            <el-button type="default" @click="handleFinishRecharge">已完成充值</el-button>
          </div>
        </div>
      </div>
    </base-dialog>
  </base-container>
</template>

<script setup>
  import useCrudHook from "avue-table/useCrudHook";
  import {
    consumeRecordTableOption,
    rechargeRecordTableOption,
    searchOption,
  } from "@/crudOption/finance/business/PlatformAccount.js";
  import codePng from "@/assets/finance/image_code.png";

  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getAddressList,
    search: { status: "01" },
    getParamsFormat: params => {
      // 开通时间
      // if (params.createTime && params.createTime.length === 2) {
      //   params.createTimeStart = params.createTime[0];
      //   params.createTimeEnd = params.createTime[1];
      //   delete params.createTime;
      // }
      // // 到期时间
      // if (params.expiredTime && params.expiredTime.length === 2) {
      //   params.expiredTimeStart = params.expiredTime[0];
      //   params.expiredTimeEnd = params.expiredTime[1];
      //   delete params.expiredTime;
      // }
      // console.log(params, "params");
      // 返回查询参数
      return params;
    },
    // add: Api.customer.AddCustomer,
    // edit: Api.customer.UpdateCustomer,
  });
  // 在线充值表单
  const rechargeFormRef = ref(null);
  //资金充值账户表单参数
  const rechargeForm = ref({
    // 充值金额
    amount: "8000",
  });
  //在线充值表单参数
  const paymentCode = ref({
    //客户名称
    customerName: "青云租",
    //账户余额
    balance: "1568.02元",
  });
  // 在线充值支付码表单
  const paymentCodeForm = ref(null);
  //是否显示遮罩层
  const isShowMaskingLayer = ref(true);

  // 卡片数据
  const cardList = ref([
    {
      class: "from-[#F4F0FF] border-[#E2D6FF]",
      title: "账户余额(元)",
      value: "1000",
      id: 1,
    },
    {
      class: "from-[#E9FCF0] border-[#B5EECD]",
      title: "累计充值 (元)",
      value: "1000",
      id: 2,
    },
    {
      class: "from-[#E8F5FF] border-[#C6E2FF]",
      title: "近30日充值 (元)",
      value: "1000",
      id: 3,
    },
    {
      class: "from-[#FFF5F5] border-[#FFE8E8]",
      title: "累计消费 (元)",
      value: "1000",
      id: 4,
    },
    {
      class: "from-[#FFF7E6] border-[#FFE5B1]",
      title: "近30日消费 (元)",
      value: "1000",
      id: 5,
    },
  ]);
  //在线充值显示
  const isShowRecharge = ref(false);
  //tab-pane配置
  const tabPaneOptions = ref([
    {
      label: "充值记录",
      name: "01",
    },
    {
      label: "消费记录",
      name: "02",
    },
  ]);
  //展示充值扫码页面
  const isShowRechargePaymentCode = ref(false);

  //在线充值
  const handleRecharge = () => {
    isShowRecharge.value = !isShowRecharge.value;
    isShowRechargePaymentCode.value = false;
  };
  onMounted(() => {
    tableData.value = [
      {
        id: 1,
        createTime: "2023-04-01 10:00:00",
        rechargeType: "平台型应用",
        rechargeMode: "在线充值",
        rechargeAmount: "100.00",
        operator: "admin",
        balance: "1000.00",
      },
    ];
  });
  const handleRechargeCancel = () => {
    isShowRecharge.value = false;
    rechargeFormRef.value.resetFields();
  };
  const handleRechargeSubmit = () => {
    rechargeFormRef.value.validate(valid => {
      if (valid) {
        console.log(rechargeForm.value);
        // isShowRecharge.value = false
        rechargeFormRef.value.resetFields();
        isShowRechargePaymentCode.value = true;
      }
    });
  };
  // 充值完成
  const handleFinishRecharge = () => {
    isShowRecharge.value = false;
  };
  // 刷新二维码
  const handleRefreshClick = () => {
    isShowMaskingLayer.value = !isShowMaskingLayer.value;
  };
  // tab-pane切换
  const handleTabChange = value => {
    console.log(value);
  };
</script>

<style lang="scss" scoped>
  .border-gradient {
    border-image: linear-gradient(to bottom, red, #578aef);
  }

  .bg-translucent {
    background: rgba(0, 0, 0, 0.5);
  }

  .text-translucent-white {
    background: rgba(255, 255, 255, 0.5);
  }
</style>
